
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%-- 根据页面是否需要使用'{path}'EL表达式，决定是否定义下面两行 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<title>脚本配置</title>

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<button id="carete" class="btn">生成脚本</button>
		<button id="add" class="btn"onclick="createCol.add()">新增</button>
		<button id="del" class="btn" onclick="createCol.del()">删除</button>
		<table id="grid-table"></table>

		<div id="grid-pager"></div>

		<h6 id="showCol"></h6>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null,
			path + '/admin/powerdb/demo/home.js',
		null];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		//inline scripts related to this page

		$('#carete').click(function () {
			createCol.create();
		});

		jQuery(function($) {
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";

			var parent_column = $(grid_selector).closest('[class*="col-"]');
			//resize to fit page size
			$(window).on('resize.jqGrid', function () {
				$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
			})

			//resize on sidebar collapse/expand
			$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
				if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
					//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
					setTimeout(function() {
						$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
					}, 20);
				}
			})

			//if your grid is inside another element, for example a tab pane, you should use its parent's width:
			/**
			 $(window).on('resize.jqGrid', function () {
			var parent_width = $(grid_selector).closest('.tab-pane').width();
			$(grid_selector).jqGrid( 'setGridWidth', parent_width );
		})
			 //and also set width when tab pane becomes visible
			 $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		  if($(e.target).attr('href') == '#mygrid') {
			var parent_width = $(grid_selector).closest('.tab-pane').width();
			$(grid_selector).jqGrid( 'setGridWidth', parent_width );
		  }
		})
			 */



			var lastsel;
			jQuery(grid_selector).jqGrid({
				data: [{
					name: '主键',
					index: 'id',
					hidden: 'true',
					align:'null',
					width: '0',
					sorttype: 'text',
					editable: 'true',
					edittype: 'text',
					editoptions: 'null',
					'editoptions-rows': '12',
					'editoptions-cols': '10',
					'editoptions-size': '20',
					'editoptions-maxlength': '30',
					unformat: ''
				},
					{
						name: '名称',
						index: 'name',
						hidden: 'false',
						align:'null',
						width: '80',
						sorttype: 'text',
						editable: 'true',
						edittype: 'text',
						editoptions: 'null',
						'editoptions-rows': '',
						'editoptions-cols': '',
						unformat: ''
					}
				],
				datatype: "local",
				height: 250,
				colNames:['中文名称','英文名称','隐藏',
					'位置',
					'宽度',
					'排序类型',
					'可以编辑',
					'编辑类型',
					'编辑值配置',
					'行数',
					'列数',
					'字符串长度',
					'字符串最大长度',
					'反格式化',
				],
				colModel:[
					/*{name:'name',index:'name', width:120,editable: true,editoptions:{size:"20",maxlength:"30"}},
					{name:'index',index:'index', width:120,editable: true,editoptions:{size:"20",maxlength:"30"}},
					{name:'hidden',index:'hidden', width:60, editable: true,edittype:"checkbox",editoptions: {value:"true:false"},unformat: aceSwitch},
					{name:'align',index:'align', width:60, editable: true,edittype:"select",editoptions:{value:"0:;1:left;2:center;3:right"}},
					{name:'width',index:'width', width:60, sorttype:"int", editable: true},
					{name:'sorttype',index:'sorttype', width:60, editable: true,edittype:"select",editoptions:{value:"1:int;2:text;3:date;4:"}},
					{name:'editable',index:'editable', width:60, editable: true,edittype:"checkbox",editoptions: {value:"true:false"},unformat: aceSwitch},
					{name:'edittype',index:'edittype', width:60, editable: true,edittype:"select",editoptions:{
						value:"0:;1:ext;2:textarea;3:select;4:checkbox;5:password;6:button;7:image;8:file"}},
					{name:'editoptions',index:'editoptions', width:150, editable: true,edittype:"textarea",editoptions:{rows:"2",cols:"10"}},
					{name:'editoptions-rows',index:'editoptions-rows', width:40, editable: true},
					{name:'editoptions-cols',index:'editoptions-cols', width:40, editable: true},
					{name:'editoptions-size',index:'editoptions-size', width:40, editable: true},
					{name:'editoptions-maxlength',index:'editoptions-maxlength', width:40, editable: true},
					{name:'unformat',index:'unformat', width:150, editable: true}*/



					/*自动生成脚本的代码测试*/
					{name: "name",index: "name",hidden: true,width: 120,editable: true,editoptions:{value:"",size:"20",maxlength:"30"}},
					{name: "index",index: "index",hidden: false,width: 120,editable: true,editoptions:{value:"",size:"20",maxlength:"30"}},
					{name: "hidden",index: "hidden",hidden: false,width: 60,editable: true,edittype: "checkbox",editoptions:{value:"true:false",unformat: aceSwitch}},
					{name: "align",index: "align",hidden: false,width: 60,editable: true,edittype: "select",editoptions:{value:"0:;1:left;2:center;3:right"}},
					{name: "width",index: "width",hidden: false,width: 60,editable: true,editoptions:{value:""}},
					{name: "sorttype",index: "sorttype",hidden: false,width: 60,editable: true,edittype: "select",editoptions:{value:"1:int;2:text;3:date;4:"}},
					{name: "editable",index: "editable",hidden: false,width: 60,editable: true,edittype: "checkbox",editoptions:{value:"true:false",unformat: aceSwitch}},
					{name: "edittype",index: "edittype",hidden: false,width: 60,editable: true,edittype: "select",editoptions:{value:"0:;1:ext;2:textarea;3:select;4:checkbox;5:password;6:button;7:image;8:file"}},
					{name: "editoptions",index: "editoptions",hidden: false,width: 150,editable: true,edittype: "textarea",editoptions:{value:"",rows:"2",cols:"10"}},
					{name: "editoptions-rows",index: "editoptions-rows",hidden: false,width: 40,editable: true,editoptions:{value:""}},
					{name: "editoptions-cols",index: "editoptions-cols",hidden: false,width: 40,editable: true,editoptions:{value:""}},
					{name: "editoptions-size",index: "editoptions-size",hidden: false,width: 40,editable: true,editoptions:{value:""}},
					{name: "editoptions-maxlength",index: "editoptions-maxlength",hidden: false,width: 40,editable: true,editoptions:{value:""}},
					{name: "unformat",index: "unformat",hidden: false,width: 150,editable: true,editoptions:{value:""}},
				],
				onSelectRow : function(id) {
					if (id && id !== lastsel) {
						jQuery(grid_selector).jqGrid('restoreRow', lastsel);
						jQuery(grid_selector).jqGrid('editRow', id, true);
						lastsel = id;
					}
				},
				shrinkToFit: false,
				viewrecords : true,
				rowNum:10,
				rowList:[10,20,30],
				pager : pager_selector,
				altRows: true,
				//toppager: true,

				multiselect: true,
				//multikey: "ctrlKey",
				multiboxonly: true,

				loadComplete : function() {
					var table = this;
					setTimeout(function(){
						styleCheckbox(table);

						updateActionIcons(table);
						updatePagerIcons(table);
						enableTooltips(table);
					}, 0);
				},

//			editurl: "/dummy.html",//nothing is saved
				caption: "jqGrid with inline editing"

				//,autowidth: true,


				/**
				 ,
				 grouping:true,
				 groupingView : {
				 groupField : ['name'],
				 groupDataSorted : true,
				 plusicon : 'fa fa-chevron-down bigger-110',
				 minusicon : 'fa fa-chevron-up bigger-110'
			},
				 caption: "Grouping"
				 */

			});
			$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size



			//enable search/filter toolbar
			//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			//jQuery(grid_selector).filterToolbar({});


			//switch element when editing inline
			function aceSwitch( cellvalue, options, cell ) {
				setTimeout(function(){
					$(cell) .find('input[type=checkbox]')
							.addClass('ace ace-switch ace-switch-5')
							.after('<span class="lbl"></span>');
				}, 0);
			}
			//enable datepicker
			function pickDate( cellvalue, options, cell ) {
				setTimeout(function(){
					$(cell) .find('input[type=text]')
							.datepicker({format:'yyyy-mm-dd' , autoclose:true});
				}, 0);
			}


			//navButtons
			jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: true,
						editicon : 'ace-icon fa fa-pencil blue',
						add: true,
						addicon : 'ace-icon fa fa-plus-circle purple',
						del: true,
						delicon : 'ace-icon fa fa-trash-o red',
						search: true,
						searchicon : 'ace-icon fa fa-search orange',
						refresh: true,
						refreshicon : 'ace-icon fa fa-refresh green',
						view: true,
						viewicon : 'ace-icon fa fa-search-plus grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						//width: 700,
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						//width: 700,
						closeAfterAdd: true,
						recreateForm: true,
						viewPagerButtons: false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
									.wrapInner('<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm: true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if(form.data('styled')) return false;

							form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
							style_delete_form(form);

							form.data('styled', true);
						},
						onClick : function(e) {
							//alert(1);
						}
					},
					{
						//search form
						recreateForm: true,
						afterShowSearch: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw: function(){
							style_search_filters($(this));
						}
						,
						multipleSearch: true,
						/**
						 multipleGroup:true,
						 showQuery: true
						 */
					},
					{
						//view record form
						recreateForm: true,
						beforeShowForm: function(e){
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
						}
					}
			)



			function style_edit_form(form) {
				//enable datepicker on "sdate" field and switches for "stock" field
				form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

				form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
				//don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
				//.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


				//update buttons classes
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
				buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
				buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

				buttons = form.next().find('.navButton a');
				buttons.find('.ui-icon').hide();
				buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
				buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
			}

			function style_delete_form(form) {
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
				buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
				buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
			}

			function style_search_filters(form) {
				form.find('.delete-rule').val('X');
				form.find('.add-rule').addClass('btn btn-xs btn-primary');
				form.find('.add-group').addClass('btn btn-xs btn-success');
				form.find('.delete-group').addClass('btn btn-xs btn-danger');
			}
			function style_search_form(form) {
				var dialog = form.closest('.ui-jqdialog');
				var buttons = dialog.find('.EditTable')
				buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
				buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
				buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
			}

			function beforeDeleteCallback(e) {
				var form = $(e[0]);
				if(form.data('styled')) return false;

				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_delete_form(form);

				form.data('styled', true);
			}

			function beforeEditCallback(e) {
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_edit_form(form);
			}



			//it causes some flicker when reloading or navigating grid
			//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
			//or go back to default browser checkbox styles for the grid
			function styleCheckbox(table) {
				/**
				 $(table).find('input:checkbox').addClass('ace')
				 .wrap('<label />')
				 .after('<span class="lbl align-top" />')


				 $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
				 .find('input.cbox[type=checkbox]').addClass('ace')
				 .wrap('<label />').after('<span class="lbl align-top" />');
				 */
			}


			//unlike navButtons icons, action icons in rows seem to be hard-coded
			//you can change them like this in here if you want
			function updateActionIcons(table) {
				/**
				 var replacement =
				 {
					 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
					 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
					 'ui-icon-disk' : 'ace-icon fa fa-check green',
					 'ui-icon-cancel' : 'ace-icon fa fa-times red'
				 };
				 $(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
				 */
			}

			//replace icons with FontAwesome icons like above
			function updatePagerIcons(table) {
				var replacement =
				{
					'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
					'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
					'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
					'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
				};
				$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
					var icon = $(this);
					var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

					if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
				})
			}

			function enableTooltips(table) {
				$('.navtable .ui-pg-button').tooltip({container:'body'});
				$(table).find('.ui-pg-div').tooltip({container:'body'});
			}

			//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

			$(document).one('ajaxloadstart.page', function(e) {
				$.jgrid.gridDestroy(grid_selector);
				$('.ui-jqdialog').remove();
			});
		});
	});
</script>
